<template>
  <div>
    <div style="margin-bottom: 30px;">
      <h3>{{ videoInfo.title }}</h3>
      <div>
        <div class="videoInfo">
          <span>{{ formatByPattern(videoInfo.upload_time, 'YYYY-MM-DD HH:mm:ss') }}</span>
          <span>
            <StopOutlined style="color: red;" v-if="videoInfo.type != 0" />{{ videoInfo.type == 0 ? '允许转载' : '未经本人允许，不许转载'
            }}
          </span>
          <span>播放量: {{ videoInfo.watch }}</span>
          <span>弹幕数量: {{ videoInfo.barrage }}</span>
        </div>
      </div>
    </div>
    <div id="videoListElement">
      <video id="videoPlayer" class="video-js ">
      </video>
    </div>
    <!-- 弹幕 共计八条轨道-->
    <div style="position: relative;">
      <div class="barrage" id="barrage">
        <div class="barrage-way" v-for="index in 8" :key="index" :id="'track-' + index">
        </div>
      </div>
    </div>

    <!-- 视频用户操作信息 -->
    <div class="video-situation">
      <div style="width: 40%;display: flex; justify-content: space-between;">
        <div :class="{ 'user-action': true, 'action-active': (videoInfo.userAgree) }" @click="userLike()" title="点赞"
          ref="videoLike">
          <svg width="1em" height="1em" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"
              fill="currentColor"></path>
          </svg>
          <span style="font-size: 20px;">{{ videoInfo.agree }}</span>
        </div>

        <div :class="{ 'user-action': true, 'action-active': (videoInfo.userCoin) }" @click="userCoin()" title="投币"
          ref="videoCoin">
          <svg width="1em" height="1em" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"
              fill="currentColor"></path>
          </svg>
          <span style="font-size: 20px;">{{ videoInfo.coin }}</span>
        </div>

        <div :class="{ 'user-action': true, 'action-active': (videoInfo.userCollection) }" @click="userCollection()"
          title="收藏" ref="videoColl">
          <svg width="1em" height="1em" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M19.8071 9.26152C18.7438 9.09915 17.7624 8.36846 17.3534 7.39421L15.4723 3.4972C14.8998 2.1982 13.1004 2.1982 12.4461 3.4972L10.6468 7.39421C10.1561 8.36846 9.25639 9.09915 8.19315 9.26152L3.94016 9.91102C2.63155 10.0734 2.05904 11.6972 3.04049 12.6714L6.23023 15.9189C6.96632 16.6496 7.29348 17.705 7.1299 18.7605L6.39381 23.307C6.14844 24.6872 7.62063 25.6614 8.84745 25.0119L12.4461 23.0634C13.4276 22.4951 14.6544 22.4951 15.6359 23.0634L19.2345 25.0119C20.4614 25.6614 21.8518 24.6872 21.6882 23.307L20.8703 18.7605C20.7051 17.705 21.0339 16.6496 21.77 15.9189L24.9597 12.6714C25.9412 11.6972 25.3687 10.0734 24.06 9.91102L19.8071 9.26152Z"
              fill="currentColor"></path>
          </svg>
          <span style="font-size: 20px;">{{ videoInfo.collection }}</span>
        </div>

        <div :class="{ 'user-action': true, 'action-active': (videoInfo.userForward) }" @click="userForward()" title="转发"
          ref="videoForward">
          <svg width="1em" height="1em" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M12.6058 10.3326V5.44359C12.6058 4.64632 13.2718 4 14.0934 4C14.4423 4 14.78 4.11895 15.0476 4.33606L25.3847 12.7221C26.112 13.3121 26.2087 14.3626 25.6007 15.0684C25.5352 15.1443 25.463 15.2144 25.3847 15.2779L15.0476 23.6639C14.4173 24.1753 13.4791 24.094 12.9521 23.4823C12.7283 23.2226 12.6058 22.8949 12.6058 22.5564V18.053C7.59502 18.053 5.37116 19.9116 2.57197 23.5251C2.47607 23.6489 2.00031 23.7769 2.00031 23.2122C2.00031 16.2165 3.90102 10.3326 12.6058 10.3326Z"
              fill="currentColor"></path>
          </svg>
          <span style="font-size: 20px;">{{ videoInfo.forward }}</span>
        </div>
      </div>
      <!-- 发送弹幕 -->
      <div class="send-barrage">

        <div v-if="userId != ''" style="display: flex;width: 100%;">

          <!-- 弹幕颜色选择器 -->
          <div style="padding: 5px 5px 0 5px;">
            <a-tooltip>
              <template #title>
                <div>
                  <span>颜色</span>
                  <div style="display: flex;align-items: center; width: 200px;">
                    <a-input v-model:value="barrageColor" style="width: 100px;" :maxlength=7></a-input>
                    <span
                      :style="{ 'background-color': `${barrageColor}`, 'margin-left': 'auto', 'width': '80px', 'height': '30px' }"></span>
                  </div>
                  <div class="sample-color">
                    <span v-for="(item, index) in sampleColors" :key="index" @click="selectColor(item)"
                      :style="{ 'background-color': `${item}`, width: '15px', height: '15px', cursor: 'pointer' }"></span>
                  </div>
                </div>
              </template>
              <span class="barrage-style"><svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 22 22">
                  <path
                    d="M17 16H5c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1zM6.96 15c.39 0 .74-.24.89-.6l.65-1.6h5l.66 1.6c.15.36.5.6.89.6.69 0 1.15-.71.88-1.34l-3.88-8.97C11.87 4.27 11.46 4 11 4s-.87.27-1.05.69l-3.88 8.97c-.27.63.2 1.34.89 1.34zM11 5.98 12.87 11H9.13L11 5.98z">
                  </path>
                </svg></span> </a-tooltip>
          </div>

          <a-input style="width: 90%;" v-model:value="barrageText" show-count :maxlength="50" :bordered=false
            placeholder="发送一条弹幕" @focus="animationPause" @blur="animationMove" id="barrageInput"/>
        </div>
        <div v-else>
          <span><span class="show-login" @click="loginDialog">登录</span>或 <span class="show-login"
              @click="loginDialog">注册</span>发送弹幕</span>
        </div>
        <div style="margin-left: auto;">
          <a-button size="small" :block=true class="send-barrage-btn" @click="sendBarrage"
            :disabled="userId == ''">发送</a-button>
        </div>

      </div>
    </div>

    <!-- 视频简介 -->
    <div v-show="videoInfo.video_introduct != ''" style="margin: 16px 0px;">
      <div style="height: 84px; overflow: hidden;" ref="videoIntroduct" id="videoIntroduct">
        <span style="white-space: pre-line;">{{ videoInfo.video_introduct }}
        </span>
      </div>
    </div>

    <div ref="toggle" class="introduct-toggle" @click="getMoreIntroduction()">展示更多</div>

    <!-- 包括的Tag -->
    <div style="display: flex; overflow: hidden;margin-top: 1%;">
      <div class="tag" v-for="(item, index) in tagList" :key="index" @click="getVideoByTag(item.tagId)">
        <span>{{ item.content }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>

import { getVideoInfo, updateVideoInfo, tourist, userBehavior } from '@/api/video.js';
import { StopOutlined, LikeOutlined, StarOutlined, UpSquareFilled } from '@ant-design/icons-vue'
import videojs from 'video.js'
import { ref, reactive, defineProps, onMounted, onUnmounted, watch, defineEmits, onBeforeUnmount, computed, inject } from 'vue'
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import { formatByPattern } from '@/utils/dateFormat.js';
import { getTagsById } from '@/api/tag.js'
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';
import * as responseStatus from '@/utils/constant.js';
import {getVideoBarrage} from '@/api/barrage.js'

//向父组件中传递值的函数入口
const emit = defineEmits(['uploaderInfo']);
const store = useStore();
//拿到父组件中传递过来的值
const props = defineProps({
  videoId: {
    type: String,
    default: null,
    required: true
  }
})
//从provide中拿到定义的对象 此时获取的对象为控制登陆页面弹出
const loginPageShow = inject('loginPageShow');

//弹幕示例颜色
const sampleColors = reactive(['#D20103', '#5DE2E7', '#EFC3CA', '#E8E8E8', '#CC6CE7', '#FFDE59']);

//弹幕的默认颜色
const barrageColor = ref('#FFFFFF');

let userId = computed(() => {
  getUserAction();
  return store.getters['user/userId'];
})

//弹幕池 ，防止弹幕数量多无法处理
const trackList = [];

//自定义颜色选择绑定的值
const barrageText = ref('')

let videoPlay = null; //videojs 绑定对象
let videoProcess = -1; //监控视频观看进度

const videoLike = ref('') //点赞
const videoColl = ref('') //收藏
const videoCoin = ref('') //投币
const videoForward = ref('') //转发

const tagList = ref([]) //视频列表
const videoIntroduct = ref('') //视频介绍
const toggle = ref('');
let toggleFlag = false;
//默认视频信息
let videoInfo = reactive({})

//当前视频的时长以及当前观看进度
let videoDuration = ref(0)
let hadWatch = ref(0)

/* webSocket连接对象 */
const webSocket = ref(null);


/* */
let barrageList = [];
/**
 * 监听父组件传入的videoId ，以便更改视频信息
 */
watch(() => props.videoId, (newValue) => {

  getUserAction();

  initWebSocket(newValue);

  getVideoInfo(newValue).then(res => {

    const data = res.data;

    if (videoPlay) {

      videoPlay.dispose();

      videoPlay = null;
      createDom();

      setTimeout(() => {
        initVideo(data);
      }, 500);
    } else {
      setTimeout(() => {
        initVideo(data);
      }, 500);
    }
  })
})

onMounted(() => {

  getVideoInfo(props.videoId).then(res => {
    const data = res.data;
    initVideo(data);
  })

  getTagsById(props.videoId).then(res => {
    tagList.value = res.data;
  });

  /*构建webSocket 对象*/
  initWebSocket(props.videoId);

})

/**
 * 若当前已登录 则获取对该视频的行为
 */
const getUserAction = () => {

  if (store.getters['user/userId'] != '') {
    userBehavior(props.videoId).then(res => {
      for (let x in res.data) {
        videoInfo[x] = res.data[x];
      }
    })
  } else {
    for (let x in videoInfo) {
      if (typeof videoInfo[x] === 'boolean') {
        videoInfo[x] = false;
      }
    }

  }

}
/**
 * 更改视频信息时 对videojs重新复制一个dom元素
 */
const createDom = () => {
  const videoElement = document.createElement('video');
  videoElement.id = 'videoPlayer';
  videoElement.className = 'video-js';

  const parentElement = document.getElementById('videoListElement');
  parentElement.appendChild(videoElement);
}

/**
 * 初始化播放器设置
 * @param {Object} data 
 */
const initVideo = (data) => {

  for (let x in data) {
    videoInfo[x] = data[x];
  }

  const { user_id, self_introduction, user_name, avatar } = data;
  emit('uploaderInfo', { userId: user_id, selfIntroduction: self_introduction, userName: user_name, avatar: process.env.VUE_APP_VIDEO_PROXY_TARGET + "/image/" + avatar })

  var controlBar = {
    children: [

      { name: 'playToggle' },
      { name: 'volumePanel' },
      { name: 'currentTimeDisplay' },
      { name: 'progressControl' },
      { name: 'durationDisplay' },

      { name: 'playbackRateMenuButton', playbackRates: [0.5, 1, 1.5, 2] }
    ],
    PictureInPictureToggle: true, //画中画
    FullscreenToggle: true,//全屏
    playbackRates: [0.5, 1, 1.5, 2],
  }

  videojs.addLanguage('zh-CN', video_zhCN);
  videoPlay = videojs(document.getElementById('videoPlayer'), {
    language: 'zh-CN',
    autoplay: false,
    controls: true,
    controlBar: controlBar,
    poster: process.env.VUE_APP_VIDEO_PROXY_TARGET + "/image/" + data.cover_url,
    sources: [
      {
        src: process.env.VUE_APP_VIDEO_PROXY_TARGET + "/image/" + data.video_url,
        type: 'application/x-mpegURL'
      }
    ],
  }, function onPlayReady() {
    this.on('timeupdate', function(e){
      hadWatch.value = parseInt(this.currentTime());
      if(videoProcess == hadWatch.value){
        return ;
      }

      //获取视频一段时间内的弹幕
      if(hadWatch.value % 10 == 0 || hadWatch.value == 0){
          getBarrage(hadWatch.value);
        }
        
        //每秒判断是否有弹幕飘过
        if(barrageList.length > 0){
          let current =  barrageList.filter(item => hadWatch.value == item.videoSecond);
          //删除需要显示的弹幕
          barrageList = barrageList.filter(item => current.value != item.videoSecond);
          for(var i = 0; i < current.length; i ++){
            addToTrackList(current[i].color,current[i].content,current[i].trackId);
          }
        }

      videoProcess = hadWatch.value;
    });
    this.on('playing', function () {
      videoDuration.value = Math.floor(this.duration());

    });
    this.on('pause', function () {
      console.log('视频暂停');

      if (videoDuration.value * 0.8 <= hadWatch.value) {
        videoWatchCount('watch');
      }
    })

    this.on('ended', function () {
      console.log('视频结束', videoDuration.value, hadWatch.value);

      if (videoDuration.value * 0.8 > hadWatch.value) {
        videoWatchCount('watch');
      }
      hadWatch.value = 0;
    })

    this.on('error', function () {
      this.errorDisPlay.close();
    });
    this.ready(() => {

      this.tech().on('retryplaylist', () => {
        this.src('');
      })
    });
  });

}

/**
 * 用户点赞
 */
const userLike = () => {
  abstractFunc('agree', 'userAgree')
}

/**
 * 用户投币
 */
const userCoin = async () => {
  const obj = {
    videoId: props.videoId,
    coin: 0,
  }

  obj.coin += 1;

  try {
    await updateVideoInfo(obj);
  } catch (e) {
    return;
  }

  videoInfo.coin += 1;
  videoInfo['userCoin'] = true;

}

/**
 * 用户收藏
 */
const userCollection = () => {
  abstractFunc('collection', 'userCollection')
}

/**
 * 用户转发
 */
const userForward = () => {
  abstractFunc('forward', 'userForward');
  let port = process.env.port;
}

/**
 * 处理videoInfo中key值相同且处理方式相同的函数抽取 视频播放量排除在外
 * @param {String} prop videoInfo 中的属性 一般显示对应用户行为数量
 * @param {String} userProp videoInfo 中的属性 一般显示用户行为的样式显示
 */
const abstractFunc = async (prop, userProp) => {
  const obj = {
    videoId: props.videoId,
  }

  obj[prop] = 0;

  if (typeof videoInfo[userProp] === 'undefined') {
    videoInfo[userProp] = true;
  } else {
    videoInfo[userProp] = !videoInfo[userProp];
  }

  obj[prop] = videoInfo[userProp] ? 1 : -1;

  //响应拦截器中设置了返回状态不为 responseStatus.SUCCESS 时 创建Error 所以在此访问不成功时需要捕获异常
  try {
    await updateVideoInfo(obj);
  } catch (e) {
    videoInfo[userProp] = !videoInfo[userProp];
    return;
  }

  videoInfo[prop] = videoInfo[userProp] ? videoInfo[prop] + 1 : videoInfo[prop] - 1;
}

/**
 * 对应视频数据的观看数进行统计
 * @param {String} prop 
 */
const videoWatchCount = async (prop) => {
  const obj = {
    videoId: props.videoId,
  }

  obj[prop] = 1;

  try {

    if (store.getters['user/userId'] == '') {
      await tourist(obj);
    } else {
      await updateVideoInfo(obj);
    }
    videoInfo[prop] += 1;
  } catch (e) {

  }

}

/**
 * 对应视频数据的弹幕数进行统计
 * //TODO: 连接websocket 或者其他实时显示弹幕
 * @param {String} prop 
 */
const videoBarrageCount = async (prop) => {
  const obj = {
    videoId: props.videoId,
  }

  obj[prop] = 1;

  try {

    await updateVideoInfo(obj);

    videoInfo[prop] += 1;
  } catch (e) {

  }

}

//点击发送弹幕的那个登录 注册 触发此函数 显示出登陆页面
const loginDialog = () => {
  loginPageShow.value = !loginPageShow.value;
}

const getBarrage = async (val) => {

  const data = {
    vid: props.videoId,
    start: val,
    end: val + 10
  }

  const result = await getVideoBarrage(data);

  barrageList.push(...result.data)

}

/**
 * 查看视频简介
 */
const getMoreIntroduction = () => {
  toggleFlag = !toggleFlag;

  if (toggleFlag) {
    videoIntroduct.value.style.height = 'auto';
    toggle.value.innerText = '收起';
  } else {
    videoIntroduct.value.style.height = '84px';
    toggle.value.innerText = '展示更多';
  }
}

/**
 * 发送弹幕
 */
const sendBarrage = () => {

  if(barrageText.value == ''){
    return ;
  }

  const sendData = {
    userId: store.getters['user/userId'],
    videoId: props.videoId,
    color: barrageColor.value,
    content: barrageText.value,
    trackId: Math.floor(Math.random() * 8) + 1,
    videoSecond: hadWatch.value
  }

  //webSocket 发送信息
  if(webSocket.value != null){

    webSocket.value.send(JSON.stringify(sendData));

    setTimeout(()=> {
      if(webSocket.value.readyState === 1){
        videoBarrageCount('barrage');
      }
    }, 1000);
  }

  barrageText.value = '';
}

/**
 * 创建弹幕的方式 可以从已完成的弹幕池中拿取原先的元素 当弹幕池里的元素不够时 就创建新的元素并放入其中
 * @param {String} color 
 * @param {String} text 
 * @param {Number} trackId 
 */
const addToTrackList = (color, text, trackId) => {

  let timerInterval, time = 1;

  let element = null;

  //优先从弹幕池中提取数据 延迟1秒出现
  timerInterval = setInterval(() => {
    if (time >= 0) {
      if (trackList.length > 0) {
        var tempObj = trackList.pop();
        trackId = tempObj.id;
        element = tempObj.obj;

        //赋值新的值
        element.style.color = color;
        element.textContent = text;

        putInTrack(element , trackId);
        clearInterval(timerInterval);
      }
      time--;
    } else {

      //最多创建60个span元素
      if(trackList.length <= 60) {
        console.log(1);
        element = createBarrageDom(color, text);
        putInTrack(element , trackId);
      }

      clearInterval(timerInterval); 
    }
  }, 100);
}

/**
 * 将元素放入轨道
 * @param {HTMLElement} element 
 * @param {Number} trackId 
 */
const putInTrack = (element, trackId) => {

  const dom = document.getElementById(`track-${trackId}`);
  dom.appendChild(element);

  //异步设置对应动画结束后设置
  setTimeout(() => {
    element.addEventListener('animationend', () => {
      dom.removeChild(element);

      trackList.push({
        id: trackId,
        obj: element
      });

      console.log('element removed');
    }, false);

  }, 500);
}

/**
 * 聚焦弹幕输入框时 暂停动画 视频
 */
const animationPause = () => {
  var arr1 = document.getElementsByClassName("barrage-item");
  changeAnimationState(arr1, "paused");

  if (videoPlay) {
    videoPlay.pause();
  }
}
/**
 * 失焦弹幕输入框时 恢复动画
 */
const animationMove = () => {
  var arr1 = document.getElementsByClassName("barrage-item");
  changeAnimationState(arr1, "running");
  if (videoPlay) {
    videoPlay.play();
  }
}

/**
 * 传入HTMLElement对象数组 更改其动画的状态
 * @param {Array} arr 
 * @param {String} state 
 */
const changeAnimationState = (arr, state) => {
  for (var i = 0; i < arr.length; i++) {
    arr[i].style.animationPlayState = state;
  }
}
/**
 * 改变弹幕的颜色
 * @param {String} color 
 */
const selectColor = (color) => {
  barrageColor.value = color;
  document.getElementById('barrageInput').focus();
}

/**
 * 根据文字和字体颜色生成弹幕
 * @param {String} textColor 
 * @param {String} content 
 */
const createBarrageDom = (textColor, content) => {

  const element = document.createElement('span');
  element.style.color = textColor;
  element.textContent = content;
  element.className = 'barrage-item';

  /**
   * 为元素添加动画效果
   */
  const barrageAnimate = `@keyframes right-to-left {
    from{
      transform: translateX(860px);
    }
    to{
      transform: translateX(-100%);
    }
  }`

  const style = document.createElement('style');
  style.setAttribute('type', 'text/css');
  document.head.appendChild(style);
  style.sheet.insertRule(barrageAnimate, 0);
  var duration = (Math.floor(Math.random() * 5) + 5) + 's';

  element.style.animation = `right-to-left ${duration} linear forwards`;

  return element;
}


// ----------------WebSocket相关--------------------

const initWebSocket = (vid) => {

  if(webSocket.value != null){
    try{
      webSocket.value.onclose();
    }catch(e) {

    }
  }

  let websocketUrl = process.env.VUE_APP_WS_API;

  if('WebSocket' in window && websocketUrl){
    console.log(`${websocketUrl}/${vid}`);
    webSocket.value = new WebSocket(`${websocketUrl}/${vid}`);

    webSocket.value.onopen = () => {
      console.log('webSocket connection');
    };

    webSocket.value.onclose = (e) => {
      console.log('webSocket closed',e);
    }

    webSocket.value.onerror = (e) => {
      console.log('webSocket connection error',e);
      message.warning({
        content:'WebSocket 目前不可用',
        duration: 1
      });
    }

    webSocket.value.onmessage = onMessage;

  }

}

/**
 * webSocket 接收信息
 * @param {Object} event 
 */
const onMessage = (event) => {
  /*定义你的逻辑*/

  const msg = JSON.parse(event.data);

  console.log(msg);
  if(msg.code === responseStatus.WS_SEND_BARRAGE){
    addToTrackList(msg.data.color, msg.data.content,msg.data.trackId);
  }

  if(msg.code === responseStatus.WS_COUNT_PEOPLE){

  }
}
//--------------------------------------------------
onUnmounted(() => {
  if (videoPlay) {
    videoPlay.dispose();
    videoPlay = null;
  }


})
</script>

<style scoped>
.videoInfo {
  width: 60%;
  display: flex;
  justify-content: space-between;
  color: #9499A0;
  font-size: 12px;
}

.user-action {
  font-size: 40px;
  color: #9499A0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-action:hover {
  color: #2bb3eb;
}

.action-active {
  color: #2bb3eb;
}

.video-situation {
  width: 100%;
  height: 70px;
  margin-top: 2%;
  display: flex;
  align-items: center;
  box-shadow: 0px 1px 0px grey;
}

.introduct-toggle {
  cursor: pointer;
}

.introduct-toggle:hover {
  color: #2bb3eb;
}

.barrage {
  overflow: hidden;
  position: absolute;
  height: 380px;
  display: flex;
  flex-direction: column;
  top: -400px;
  max-width: 860px;
  width: 100%;
  color: white;
  pointer-events: none;
}

.sample-color {
  padding: 10px 10px 0 10px;
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
}

.barrage .barrage-way {
  height: 50px;
  white-space: nowrap;
  font-size: 20px;
  display: flex;
  align-items: center;
}

.barrage-item {
  margin: 10px 10px 10px 10px;
  white-space: nowrap;
  width: fit-content;
}

.barrage-style {
  fill: #999999;
}

.barrage-style:hover {
  fill: #2bb3eb;
}

.send-barrage {
  width: 50%;
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 8px;
  background-color: #F6F7F8;
  padding: 0 0 0 7px;
  overflow: hidden;
}

.show-login {
  color: #2bb3eb;
  cursor: pointer;
}

.send-barrage-btn {
  border: none;
  height: 40px;
  background-color: #e6e8eb;
}

.tag {
  width: fit-content;
  min-width: 50px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  background-color: gainsboro;
  margin: 0 5px 8px 0;
  cursor: pointer;
}

.tag:hover {
  color: #2bb3eb;
}



:deep(.video-js) {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  height: 400px;
}

.video-js /deep/ .videoPlayer-dimensions {
  width: 100%;
  height: 400px;
}

.video-js /deep/ .vjs-big-play-button:before {
  font-size: 4.5em;
}

.vjs-has-started /deep/ .vjs-big-play-button {
  display: none;
}

.vjs-playing /deep/ .vjs-big-play-button {
  display: none;
}

.vjs-paused /deep/ .vjs-big-play-button,
.vjs-paused .vjs-has-started /deep/ .vjs-big-play-button {
  display: block !important;
  z-index: 1;
}

.vjs-ended /deep/ .vjs-big-play-button {
  display: block;
}

.video-js /deep/ .vjs-time-control {
  display: block;
  z-index: 1;
}

.video-js /deep/ .vjs-remaining-time {
  display: none;
}</style>